<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* ul{display: none;} */
    </style>
</head>
<body>
    <input type="button" class="btn" value="显示">
    <ul>
        <li>aaaaa</li>
        <li>bbbb</li>
        <li>cccccc</li>
        <li class="hot">ddddd</li>
        <li>ffffff</li>
        <li class="hot">ddddd</li>
        <li>ggggg</li>
    </ul>
    <script src="./jquery3.3.1.js"></script>
    <script>
        // :hidden 选取所有隐藏的元素
        // :visible 选取所有显示的元素
        // .hide(时间) 隐藏
        // .show(时间) 显示
        // $(function(){
        //     var off=true;
        //     $(".btn").click(function(){
        //         if(off){
        //             $("ul:hidden").css("display","block")
        //         }else{
        //             $("ul:visible").css("display","none")
        //         }
        //         off=!off;
        //     })
        // })

        $(function(){
            var off=true;
            $(".btn").click(function(){
                if(off){
                   $(this).val("隐藏")
                }else{
                    $("ul").show(3000);
                   $(this).val("显示")
                }
                off=!off;
            })
        })
    </script>
</body>
</html>